<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
  <meta name="keywords" content="在线答题">
  <meta name="description" content="在线答题是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
  <title>在线答题APP后台管理系统</title>
  <link rel="shortcut icon" href="favicon.ico">
  <link href="../Styles/css/bootstrap.min.css" rel="stylesheet">
  <link href="../Styles/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
  <link href="../Styles/css/animate.min.css" rel="stylesheet">
  <link href="../Styles/css/style.min.css" rel="stylesheet">
  <link href="../Styles/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">
  <link href="../Styles/css/plugins/datapicker/datepicker3.css" rel="stylesheet">
</head>

<body class="gray-bg">
  <div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
      <div class="col-sm-12">
        <div class="ibox float-e-margins">
          <div class="ibox-title">
            <h5>普通用户添加</h5>
          </div>
          <div class="ibox-content">
            <form class="form-horizontal m-t" id="AddForm">
              <div class="form-group">
                <label class="col-sm-3 control-label">姓名:</label>
                <div class="col-sm-8">
                  <input id="Name" name="Name" class="form-control" type="text">
                  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入用户名且不能为空</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">密码</label>
                <div class="col-sm-8">
                  <input id="Password" name="Password" class="form-control" type="password" aria-required="true"
                    aria-invalid="false" class="valid">
                  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入密码且6~12位</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">确认密码:</label>
                <div class="col-sm-8">
                  <input id="ConfirmPwd" name="ConfirmPwd" class="form-control" type="password" aria-required="true"
                    aria-invalid="true" class="error">
                  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请再次输入您的密码且两次密码需要完全相同</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">出生日期：</label>
                <div class="col-sm-8">
                  <div class="input-group date">
                    <input type="text" class="form-control" name="Birthday" id="Birthday">
                    <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                  </div>
                  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请选择出生日期</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">电子邮件：</label>
                <div class="col-sm-8">
                  <input id="Email" name="Email" class="form-control" type="email">
                  <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 请输入正确的电子邮件格式</span>
                </div>
              </div>
              <div class="form-group">
                <label class="col-sm-3 control-label">备注</label>
                <div class="col-sm-8">
                  <textarea id="Remark" name="Remark" class="form-control" style="height:100px"></textarea>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-8 col-sm-offset-3">
                  <div class="checkbox">
                    <label>
                      <input type="checkbox" class="checkbox" id="agree" name="agree"> 我已经认真阅读并同意《在线考试软件使用协议》
                    </label>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div class="col-sm-8 col-sm-offset-3">
                  <button class="btn btn-primary" type="submit">提交</button>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="../Scripts/jquery.min.js"></script>
  <script src="../Scripts/bootstrap.min.js"></script>
  <script src="../Scripts/content.min.js"></script>
  <script src="../Scripts/plugins/validate/jquery.validate.min.js"></script>
  <script src="../Scripts/plugins/validate/messages_zh.min.js"></script>
  <script src="../Scripts/plugins/sweetalert/sweetalert.min.js"></script>
  <script src="../Scripts/plugins/datapicker/bootstrap-datepicker.js"></script>
  <script>
    $(function () {
      $('#Birthday').datepicker({
        todayBtn: "linked",
        keyboardNavigation: !1,
        forceParse: !1,
        calendarWeeks: !0,
        autoclose: !0
      });

      $("#AddForm").validate({
        rules: { //验证规则
          Name: {
            required: true,
            maxlength: 20
          },
          Password: {
            required: true,
            minlength: 6,
            maxlength: 20
          },
          ConfirmPwd: {
            required: true,
            minlength: 6,
            maxlength: 20,
            equalTo: "#Password"
          },
          Email: {
            email: true
          }
        },
        messages: { //对应的提示
          Name: {
            required: "用户名必填",
            maxlength: "用户名最长20个字符(汉字)"
          },
          Password: {
            required: "密码必填",
            minlength: "密码最短为6个字符",
            maxlength: "密码最长为20个字符"
          },
          ConfirmPwd: {
            required: "确认密码必填",
            minlength: "确认密码最短为6个字符",
            maxlength: "确认密码最长为20个字符",
            equalTo: "确认密码与密码不相同"
          },
          Email: {
            emial: "电子邮件格式不正确"
          }
        },
        //debug: true,
        submitHandler: function (form) { //提交方法
          var formData = $("#AddForm").serializeArray();//[{"name":"Name","value":"王五"},{"name":"Password","value":"123456"}....]
          //console.log(data);
          $.ajax({
            url: 'http://localhost:5000/User/Add',
            type: 'POST',
            data: formData,
            dataType: 'json',            
            success: function (result) { //边缘弹出
              swal({
                title: "系统提示",
                text: result.message,
                type: result.status ? "success" : "warning",
              }, function () {
                if (result.status) {
                  //将用户数据存到本地
                  //setStorage("user", result.user);
                 // window.location.href = "index.html";
                } else {
                  window.location.href = window.location.href;
                }
              });
            }
          });
        }
      });
    });
  </script>
</body>
</html>